<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">

	<div id="main" style="height: 100%"></div>
<!-- 引入jquery -->
<script type="text/javascript" th:src="@{/ajax/libs/jquery/3.5.0/dist/jquery.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/ajax/libs/echarts/5.0.1/dist/echarts.min.js}"></script>
	<script type="text/javascript">
	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;

	option = {
	    series: [{
	        type: 'gauge',
	        axisLine: {
	            lineStyle: {
	                width: 30,
	                color: [
	                    [0.3, '#67e0e3'],
	                    [0.7, '#37a2da'],
	                    [1, '#fd666d']
	                ]
	            }
	        },
	        pointer: {
	            itemStyle: {
	                color: 'auto'
	            }
	        },
	        axisTick: {
	            distance: -30,
	            length: 8,
	            lineStyle: {
	                color: '#fff',
	                width: 2
	            }
	        },
	        splitLine: {
	            distance: -30,
	            length: 30,
	            lineStyle: {
	                color: '#fff',
	                width: 4
	            }
	        },
	        axisLabel: {
	            color: 'auto',
	            distance: 40,
	            fontSize: 20
	        },
	        detail: {
	            valueAnimation: true,
	            formatter: '{value} km/h',
	            color: 'auto'
	        },
	        data: [{
	            value: 70
	        }]
	    }]
	};

	setInterval(function () {
	    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
	    myChart.setOption(option, true);
	}, 2000);

	option && myChart.setOption(option);
	</script>
</body>
</html>